<template>
  <div class="question_page">
    <div class="w1200">
      <!-- 面包屑 开始 -->
      <div class="breadcrumb">
        <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
          <el-breadcrumb-item>问答</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 面包屑 end -->

      <!-- 提问题 开始 -->
      <div class="search_box">
        <div class="search_logo">
          <img src="@/assets/images/question/logo.png" class="img" alt="" />
          <span class="circle"></span>
          <span class="name">社区问答</span>
        </div>

        <div class="search_input">
          <input type="text" v-model="term" class="a_input" :placeholder="placeHolder" @focus="onFocus" @blur="onBlur" />
          <!-- <el-button type="primary" class="btn" @click="searchEvent">搜索</el-button> -->
          <nuxt-link :to="`/question?term=${term}&pageNumber=1`" class="btn" replace>搜索</nuxt-link>
        </div>
      </div>
      <!-- 提问题 end -->

      <!-- 内容 开始 -->
      <div class="content">
        <!-- 左侧内容 开始 -->
        <div class="left_box">
          <!-- 最新问题 开始 -->
          <div class="new_question">
            <h2 class="h2">最新问题</h2>
            <div class="question_list">
              <Question v-for="(item, index) in newsList" :key="`question_${index}`" :info="item" />
            </div>
          </div>
          <!-- 最新问题 end -->

          <!-- 分页 开始 -->
          <div class="pagination">
            <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页"
              :current-page="pageNumber" :total="total" @current-change="changePage">
            </el-pagination>
          </div>
          <!-- 分页 end -->
        </div>
        <!-- 左侧内容 end -->

        <!-- 右侧内容 开始 -->
        <div class="right_box">
          <!-- 热门搜索 开始 -->
          <!-- <div class="problem_box">
            <div class="head">热门搜索</div>
            <div class="hot_word_list">
              <div class="cell">
                <img src="@/assets/images/hot.png" class="img" alt="" />
                <span>种植牙品牌</span>
              </div>
              <div class="cell">
                <img src="@/assets/images/hot.png" class="img" alt="" />
                <span>种植牙价格</span>
              </div>
              <div class="cell">
                <span>深圳牙齿矫正</span>
              </div>
              <div class="cell">
                <span>矫正医生</span>
              </div>
              <div class="cell">
                <span>隐适美</span>
              </div>
              <div class="cell">
                <span>深圳隐形矫正</span>
              </div>
              <div class="cell">
                <span>矫正价格</span>
              </div>
            </div>
          </div> -->
          <!-- 热门搜索 end -->

          <!-- 推荐医生 开始 -->
          <div class="problem_box">
            <div class="head">推荐医生</div>
            <div class="list_box doctor_list">
              <ShopDoctor v-for="(item, index) in doctorList" :key="`shop_doctor_${index}`" :info="item" />
            </div>
          </div>
          <!-- 推荐医生 end -->
        </div>
        <!-- 右侧内容 end -->
      </div>
      <!-- 内容 end -->
    </div>

    <!-- 弹框 开始 -->
    <div class="li_popup" v-show="showPopup">
      <div class="blk"></div>
      <div class="li_popup_content">
        <div class="image_box">
          <img src="@/assets/images/question/chahua.png" alt="">
        </div>
        <div class="li_content">
          <p>功能正在升级中</p>
          <p>敬请期待!</p>
          <button class="btn" @click="closeDialog">我知道了</button>
        </div>
      </div>
    </div>
    <!-- 弹框 end -->

  </div>
</template>
<script>
import {
  PLATFORM_TYPE,
  GET_KEYWORDS_OPTIONS,
  GET_QUESTIONANSWER_SEARCH,
  GET_SEO_SETTING_INFO,
  GET_DOCTOR_SEARCH
} from "@/http/interface";
import qs from "qs";
import Question from "@/components/question/index.vue";
import ShopDoctor from '@/components/doctor/shopDoctor.vue'
export default {
  components: {
    Question,
    ShopDoctor
  },
  data() {
    return {
      classList: [],
      projectList: [],
      articleClassId: "",
      projectId: "",
      form: {},
      newsList: [],
      total: 0,
      pageNumber: 1,
      baikeList: [],
      carouselIndex: 0,
      goodsList: [],
      seoInfo: {},
      term: "",
      showPopup: false,
      placeHolder: '请输入您想了解的问题',
      doctorList: []
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/question/list`
                }
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/question`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let pageNumber = Number(query.pageNumber || 1);

    // // 擅长项目
    // let pro = await $axios.get(GET_HOSPITAL_PROJECT_OPTIONS);
    // let projectList = pro.data || []

    // 社区问答
    let params = { pageSize: 10 };
    params.pageNumber = pageNumber;
    params.articleClassId = query.articleClassId;
    params.term = query.term;
    let res = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: params });
    let obj = res.data || {};
    let newsList = obj.list || [];

    // 获取关键词
    let wes = await $axios.get(GET_KEYWORDS_OPTIONS, { params: { type: 5 } });
    console.log(wes);

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 8, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};

    // 医生团队
    let des = await $axios.get(GET_DOCTOR_SEARCH, { params: { pageNumber: 1, pageSize: 5 } });
    let dobj = des.data || {}
    let doctorList = dobj.list || [];

    return {
      // classList,
      // projectList,
      newsList,
      total: obj.totalElements,
      pageNumber,
      term: query.term || '',
      //articleClassId: query.articleClassId || '',
      //projectId: query.projectId || '',
      seoInfo,
      doctorList
    };
  },
  methods: {
    // 切换分页
    changePage(e) {
      this.pageNumber = e;
      this.navigateToPage();
    },

    // 搜索
    searchEvent() {
      this.pageNumber = 1;
      this.navigateToPage();
    },

    // 切换路由
    navigateToPage() {
      //let query = this.$route.query;
      let o = { pageNumber: this.pageNumber };
      o.term = this.term;
      //o.random = Math.random()
      // let _path = `/question?${qs.stringify(o)}`;
      // console.log(_path);
      // this.$router.replace({
      //   path: _path,
      // });
      this.$routerReplace(o)
    },

    // 打开弹框
    openDialog() {
      this.showPopup = true
    },

    // 关闭弹框
    closeDialog() {
      this.showPopup = false
    },

    // 监听输入框获取焦点
    onFocus(e) {
      this.placeHolder = ''
    },

    // 监听输入框失去焦点
    onBlur() {
      this.placeHolder = '请输入您想了解的问题'
    }

  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/question/index.less";
</style>
